<!--
 * @FileDescription 绝缘检测仪
 * @Author lz
 * @Date 20230529 13:15:11
 * @LastEditors lz
 * @LastEditTime 20230529 13:15:11
-->
<template>
  <!-- v-show="Insulation" -->
  <div class="mul_box" v-drag.offset.clamp drag-trigger>
    <div v-if="Insulation">
      <img
        drag-trigger
        src="/images/主界面-仪表_slices/开机静态显示.png"
        style="position: absolute; top: 24px; left: 40px; width: 370px"
      />
      <img
        v-if="HomeContent.Default.insulationData.value.Mark == 1000"
        src="/images/主界面-仪表_slices/刻度.png"
        style="position: absolute; top: 185px; left: 115px; width: 65px"
      />
      <div class="Gear">0</div>
      <div class="Mark">
        {{ HomeContent.Default.insulationData.value.Mark }}<span class="volt">v</span>
      </div>
      <div class="Unit">{{ HomeContent.Default.insulationData.value.Unit }}</div>
      <div class="Value">{{ HomeContent.Default.insulationData.value.Value }}</div>
      <div class="Time">{{ HomeContent.Default.insulationData.value.Time }}</div>
      <img
        src="/public/images/主界面-仪表_slices/ic_warning.png"
        :class="filcker ? 'noFlicker' : 'isFlicker'"
      />
    </div>
    <div class="gray" v-else drag-trigger></div>
    <img src="/images/主界面-仪表_slices/黑色表笔4.png" class="blackPen" />
    <div class="blackPenData">
      <span style="font-size: 20px">{{
        HomeContent.Default.insulationData.value.BlackPenLink
      }}</span>
    </div>
    <img src="/images/主界面-仪表_slices/红色表笔4.png" class="redPen" />
    <div class="redPenData">
      <span style="font-size: 20px; float: right">{{
        HomeContent.Default.insulationData.value.RedPenLink
      }}</span>
    </div>
    <img
      src="/images/主界面-仪表_slices/bt_onoff.png"
      style="position: absolute; top: 401px; left: 85px; width: 51px"
      @click="onOff"
    />
    <img
      src="/images/主界面-仪表_slices/bt_up.png"
      style="position: absolute; top: 324px; left: 206px; width: 34px"
      @click="up"
    />
    <img
      src="/images/主界面-仪表_slices/bt_down.png"
      style="position: absolute; top: 392px; left: 206px; width: 34px"
      @click="down"
    />
    <img
      src="/images/主界面-仪表_slices/Test_off.png"
      class="TestOff"
      @click="Test"
      v-if="start"
    />
    <img
      src="/images/主界面-仪表_slices/Test_on.png"
      class="TestOn"
      @click="Test"
      v-else
    />
    <div class="StylusBox">
      <img
        src="/images/电压表笔-黑-select.png"
        alt=""
        class="Blackwatchpen"
        v-if="
          HomeContent.Default.insulationData.value.BlackPenLink == '' &&
          HomeContent.Default.insulationData.value.BlackPenSelect
        "
        @click="ClickPenBlack(1)"
      />
      <img
        src="/images/电压表笔-黑-normal.png"
        alt=""
        class="Blackwatchpen nor"
        v-if="
          HomeContent.Default.insulationData.value.BlackPenLink == '' &&
          HomeContent.Default.insulationData.value.BlackPenSelect == false
        "
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-select.png"
        alt=""
        class="Redwatchpen"
        v-if="
          HomeContent.Default.insulationData.value.RedPenLink == '' &&
          HomeContent.Default.insulationData.value.RedPenSelect
        "
        @click="ClickPenRed(1)"
      />
      <img
        src="/images/电压表笔-红-normal.png"
        alt=""
        class="Redwatchpen nor"
        v-if="
          HomeContent.Default.insulationData.value.RedPenLink == '' &&
          HomeContent.Default.insulationData.value.RedPenSelect == false
        "
        @click="ClickPenRed(2)"
      />
      <img
        src="/images/电压表笔-黑-null.png"
        class="Blackwatchpen"
        v-if="HomeContent.Default.insulationData.value.BlackPenLink != ''"
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-null.png"
        class="Redwatchpen"
        v-if="HomeContent.Default.insulationData.value.RedPenLink != ''"
        @click="ClickPenRed(2)"
      />
    </div>
    <div class="operateTab T3">
      <img src="/images/ic_放回.png" class="ico_1" />
      <span class="tabTxt" @click="OpenMul">放回</span>
    </div>
    <div
      class="ShortCircuit"
      @click="ShortCircuit"
      :class="ShortCircuitValue ? 'ShortCircuitBgc' : ''"
    >
      <span>短路检测</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "../../../../runtime/generate/message/ClientMessage";
import WebSocketComponent from "../../../../runtime/module/WebSocket/WebSocketComponent";
import { reactive, ref, onMounted } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
// ============================================================
const start = ref(true);
const filcker = ref(true);
const Insulation = ref(false);
const ShortCircuitValue = ref(false);
function onOff() {
  Insulation.value = !Insulation.value;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_BUTTON_ON
    )
  );
  if (!Insulation.value && HomeContent.Default.insulationData.value.Test) {
    start.value = true;
    clearInterval(timer);
    filcker.value = true;
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INSULATIONMETER_BUTTON_TEST
      )
    );
  }
}
let timer: any = null;
function Test() {
  clearInterval(timer);
  start.value = !start.value;
  if (!start.value) {
    timer = setInterval(() => {
      filcker.value = !filcker.value;
    }, 500);
  } else {
    filcker.value = true;
  }
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_BUTTON_TEST
    )
  );
}
function up() {
  let newArr = WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_BUTTON_UP
    )
  );
}
function down() {
  let newArr = WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_BUTTON_DOWN
    )
  );
}
const state = reactive({
  redType: false,
  blackType: false,
});
function ClickPenBlack(val: number) {
  state.blackType = !state.blackType;
  if (state.blackType) {
    state.redType = false;
  }
  if (val == 2) {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INSULATIONMETER_BLACKPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INSULATIONMETER_BLACKPEN_SELECT
      )
    );
  }
}
//放回
function OpenMul() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_CLOSE
    )
  );
  HomeContent.Default.insulationType.value = false;
}
// 短路检测
function ShortCircuit() {
  ShortCircuitValue.value = !ShortCircuitValue.value;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.INSULATIONMETER_TERMINAL_SHORTCIRCUIT
    )
  );
}
function ClickPenRed(val: number) {
  state.redType = !state.redType;
  if (state.redType) {
    state.blackType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INSULATIONMETER_REDPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.INSULATIONMETER_REDPEN_SELECT
      )
    );
  }
}
onMounted(async function () {});
</script>

<style scoped>
.mul_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 550px;
  background-image: url("/images/主界面-仪表_slices/绝缘电阻检测仪(2).png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.gray {
  background-color: #737b6d;
  width: 301px;
  height: 134px;
  position: absolute;
  top: 158px;
  left: 74px;
  border-radius: 8px;
}
.Gear {
  display: inline-block;
  position: absolute;
  top: 216px;
  left: 90px;
  color: black;
  font-size: 25px;
  font-family: "DS-DIGI-1";
}
.Mark {
  display: inline-block;
  position: absolute;
  top: 173px;
  /* left: 187px; */
  left: 174px;
  color: black;
  font-size: 40px;
  font-family: "DS-DIGI-1";
  width: 85px;
  text-align: center;
}
.volt {
  color: #000000;
  font-size: 20px;
  font-family: none;
  margin-left: 1px;
}
.Unit {
  display: inline-block;
  position: absolute;
  top: 234px;
  left: 347px;
  color: black;
  font-size: 13px;
  font-weight: 500;
}
.Value {
  display: inline-block;
  position: absolute;
  top: 197px;
  left: 200px;
  color: black;
  font-size: 70px;
  font-family: "DS-DIGI-1";
}
.Time {
  display: inline-block;
  position: absolute;
  top: 237px;
  left: 88px;
  color: black;
  font-size: 35px;
  font-family: "DS-DIGI-1";
}
.TestOff {
  position: absolute;
  top: 395px;
  left: 322px;
}
.TestOn {
  position: absolute;
  bottom: 95px;
  right: 67px;
}
.noFlicker {
  position: absolute;
  top: 215px;
  /* left: 168px; */
  left: 160px;
  width: 17px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.isFlicker {
  position: absolute;
  top: 215px;
  left: 168px;
  width: 17px;
  opacity: 0;
}
.blackPen {
  position: absolute;
  left: 164px;
  top: -56px;
  width: 49px;
  z-index: 1;
}
.blackPenData {
  width: 130px;
  height: 35px;
  background: #000000;
  border-radius: 7px;
  position: absolute;
  left: 73px;
  top: -69px;
  line-height: 35px;
  padding-left: 11px;
}
.redPen {
  position: absolute;
  left: 245px;
  top: -57px;
  z-index: 1;
  width: 92px;
}
.redPenData {
  width: 130px;
  height: 35px;
  background: #000000;
  border-radius: 7px;
  position: absolute;
  left: 276px;
  top: -69px;
  line-height: 35px;
  padding-right: 11px;
}
.StylusBox {
  width: 100px;
  height: 300px;
  position: absolute;
  right: -110px;
  top: 40px;
}

.Blackwatchpen {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 292px;
}

.Redwatchpen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 292px;
}

.nor {
  top: 2px;
  width: 36px;
  height: 288px;
  margin: 0 2px;
}
.operateTab {
  width: 92px;
  height: 34px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.9;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}

.tabTxt {
  font-size: 16px;
  color: #fff;
}

.tabTxt:hover {
  color: #a2f95e;
}

.ico_1 {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: 5px;
  margin-right: 5px;
}
.T3 {
  position: absolute;
  right: -100px;
  bottom: 30px;
}
.ShortCircuit {
  width: 92px;
  height: 34px;
  border-radius: 4px;
  display: inline-block;
  background-color: black;
  position: absolute;
  bottom: 76px;
  right: -100px;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
}
.ShortCircuitBgc {
  background-color: brown !important;
}
</style>
